<template>
	<view class="container">
		<view class="list">
			<view class="add_photo" >
				<!-- 	<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="6" multiple
					:maxCount="10" width="0" height="0">
					<button class="upload_button">
						<u-icon name="plus" color="#fff"></u-icon>
						上传
					</button>
				</u-upload> -->
				<button class="upload_button" @click="afterRead">
					<u-icon name="plus" color="#fff"></u-icon>
					上传
				</button>
				
				<button class="del_button" @click="del">
					<u-icon name="close" color="#fff"></u-icon>
					删除
				</button>
			</view>
			<view class="item-wrap">
				<view class="item" v-for="(item, index) in list" :key="index" >
					<view class="image" >
						<image :src="item.url" mode="scaleToFill" v-if="item.type == 0"  @click="lookDetail(item)"/>
						<image :src="item.image" class="video" mode="scaleToFill" v-if="item.type == 1"  @click="lookDetail(item)"/>
						<checkbox-group @change="checkboxChange($event, index)">
					    <checkbox class="cb"  style="transform:scale(0.9)"  color="#34C37F" />    
						</checkbox-group>
					</view>
					<view class="images_title">{{ item.cjsj }}</view>
					<view class="item_xz">
						<image :src="$imgUrl('/xiazai.png')" mode="scaleToFill" @click="toDrawing(item)" />
					</view>
		
					        
					         
					  
					        
				</view>
			</view>
			<!-- 没有数据并且没有更多的时候显示为空状态 -->
			<u-empty v-if="!list.length && status == 'nomore'" mode="list" height="280" marginTop="50"></u-empty>
			<!-- 加载更多 -->
			<u-loadmore v-else :status="status" line icon-color="#028BF7" marginTop="20" fontSize="26rpx"
				marginBottom="120" />
		</view>
		<u-popup :show="showvideo" @close="closevideo" mode="center" closeOnClickOverlay>
			<video id="video1" class="videoBox" :src="videourl">
				<cover-view class="mask">
					<cover-view @tap="playVideo">播放视频</cover-view>
					<cover-view @tap="stopVideo">暂停视频</cover-view>
				</cover-view>
			</video>
		</u-popup>
		<ArUploadFile ref="arUploadFileRef" @refreshData="getList(1)"/>
	</view>
</template>

<script>
	import ArUploadFile from './ArUploadFile.vue';
	export default {
		components:{ArUploadFile},
		data() {
			return {
				listpagenumber: 1, //当前页数
				listPage: '', //页数大小
				listlast_page: '', //总页数
				list: [], //列表数据
				status: 'loading',
				objectfit: 'cover', // 视频表现形式，contain/cover/fill, 默认contain
				findid: 0,
				showvideo: false,
				videoContext: '',
				fileList1: [],
				videourl: '',
				flid: '',
				star: 0,
				total: 0,
			};
		},
		onLoad(options) {

			console.log(options);
			this.flid = options.id;
			this.star = options.lx;
			this .mc  = options.mc; 
			uni.setNavigationBarTitle({
			        title: decodeURIComponent(this .mc)
			      });
			this.getList();
		},
		onReachBottom() {
			if (this.listPage < this.listlast_page) {
				this.status = 'loading';
				this.listpagenumber += 1;
			} else {
				this.status = 'nomore';
				return;
			}
			this.getList(); //修改页数后，重新获取数据
		},
		methods: {
			checkboxChange(e,index){
					console.log(index)
				console.log(e)
				if(e.detail.value.length){
					this.list[index]['cb'] = true;
				}else{
						this.list[index]['cb'] = false;
				}
			},
			//删除
			async del(){
				console.log("-----======")
				console.log(this.list)
				let f = [];
			f= this.list.filter(i=>i.cb);
			 console.log(f)
			f= f.map(i=>i.id);
			console.log("-----=++++++++++++++++")
			 console.log(f)
			 if(f.length){
				 this.showLoading('删除中')
				 await this.$http.post('/app/tp/delete', {
				 ids:f.join()
				 });
				 this.getList(1); 
				  this.hideLoading('删除成功')
			 }else{
				 this.toast('请勾选要删除图片')
			 }
			},
			// 获取列表数据
			async getList(type) {
				if(type){
					this.list = [];
				}

				let res = await this.$http.get('/app/tp/list', {
					page: this.listpagenumber,
					limit: 8,
					type: this.star,
					sfar:this.star,
					flid: this.flid
				});
				console.log(res);
				
				this.list = [...this.list, ...res.page.records];
				this.listlast_page = res.page.pages; //获取数据总页数
				this.listPage = res.page.current;
				this.total = res.page.total;
				if (this.total == this.list.length) {
					this.status = 'nomore';
				}


			},
			// 预览图片和视频
			lookDetail(e) {
				if (e.type == 0) {
					uni.previewImage({
						current: e.url,
						urls: [e.url]
					});
				} else if (e.type == 1) {
					this.showvideo = true;
					this.videourl = e.url;
				}
			},
			//下载图片视频
			toDrawing(e) {
				uni.downloadFile({
					url: e.url,
					success(res) {
						if (res.statusCode == 200) {

							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success(res) {
									uni.showToast({
										title: '保存成功',
										icon: 'none'
									});
									// 如果保存成功需要打开查看，请使用以下方法，同时也支持打开文件
									uni.openDocument({
										filePath: res.savedFilePath,
										success(res) {},
										fail(err) {}
									});
								},
								fail(err) {
									uni.showToast({
										title: '图片保存失败',
										icon: 'none'
									});
								}
							});
						}
					}
				});
			},
			closevideo() {
				this.showvideo = false;
			},
			playVideo() {
				this.videoContext = uni.createVideoContext('video1');
				this.videoContext.play();
			},
			stopVideo() {
				this.videoContext.pause();
			},
			//添加照片
			// 删除图片
			deletePic(event) {
				this.fileList1.splice(event.index, 1);
			},
			
			// 新增图片
			async afterRead() {

				//0 相册  1魔法
				if (this.star == "1") {
					this.$refs.arUploadFileRef.open(this.flid);
				} else {
					uni.chooseImage({
						count: 9, // 默认9, 设置图片的选择数量
						sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], // 从相册选择
						success: async (res) => {
							console.log(res);
							this.showLoading('上传中');
							for (let item of res.tempFilePaths) {
								await this.$uploadFile("/app/tp/uploadFile", item, {
									sfar: 0,
									flid: this.flid
								})
							}
							this.hideLoading('上传完成');
							
							this.getList(1)
						},
						fail: (err) => {
							// 处理错误情况
							console.error(err);
						}
					});


				}




				// 		// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				// 		let lists = [].concat(event.file);
				// 		let fileListLen = this.fileList1.length;
				// 		lists.map((item) => {
				// 			this.fileList1.push({
				// 				...item,
				// 				status: 'uploading',
				// 				message: '上传中'
				// 			});
				// 		});
				// 		let arr = [];
				// 		for (let i = 0; i < lists.length; i++) {
				// 			console.log(lists[i], '地址');

				// 			arr.push(lists[i].url);

				// 			console.log(arr, '数组');

				// 			let item = this.fileList1[fileListLen];
				// 			this.fileList1.splice(
				// 				fileListLen,
				// 				1,
				// 				Object.assign(item, {
				// 					status: 'success',
				// 					message: '',
				// 					//		url: result
				// 				})
				// 			);
				// 			fileListLen++;
				// 		}

				// 			const result = this.uploadFilePromise(arr);
				// 	},
				// 	async uploadFilePromise(tempUrl) {

				// 		let res = await this.$uploadFile(
				// 			"/app/tp/uploadFile",
				// 			tempUrl[0], {
				// 				sfar: 0,
				// 				flid: this.findid
				// 			}
				// 		)

			}
		}
	};
</script>

<style scoped lang="scss">
	.container {
		height: 100%;

		.list {
			width: 95%;
			margin: 0 auto;
		}

		.item-wrap {
			width: 100%;
			padding-top: 20rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.item {
				position: relative;
				width: 49%;
				margin-bottom: 30rpx;
			

				.image {
					width: 100%;
					height: 260rpx;
							position: relative;
					.cb{
						position: absolute;
						left: 0;
						top: 0;
						z-index: 1;
					}

					image {
						width: 100%;
						height: 100%;
					}

					.video {
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;

						&::after {
							content: '';
							background-image: url($imgUrl + '/bofangqi.png');
							background-repeat: no-repeat;
							background-size: 100% 100%;
							width: 70rpx;
							height: 70rpx;
							position: absolute;
							z-index: 2;
						}
					}
				}

				.images_title {
					height: 70rpx;
					line-height: 70rpx;
				}

				.item_xz {
					position: absolute;
					top: 0;
					right: 0;
					width: 70rpx;
					height: 70rpx;
					background: #191b1db0;
					justify-content: center;
					display: flex;
					z-index: 1;
					align-items: center;
					border-bottom-left-radius: 50%;

					image {
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
		}
	}

	.videoBox {
		.mask {
			display: flex;
			align-items: center;
			justify-content: space-around;
			height: 80rpx;
			background-color: #fff;
			position: absolute;
			left: 0;
			z-index: 999;
			bottom: 0;
			width: 100%;
		}
	}

	:deep(.u-safe-bottom) {
		display: none;
	}

	.add_photo {
		width: 95%;

		margin: 10rpx auto;
	}

	.upload_button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 650rpx;
		height: 88rpx;
		color: #333;
		font-family: PingFangSC;
		color: #ffffff;
		font-weight: 500;
		font-size: 32rpx;
		padding: 0;
		border-radius: 50px;
		background: linear-gradient(90deg, #13b1a2 0%, #276329 100%);
		border: none;
	}
	
	
	.del_button {
		margin-top: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 650rpx;
		height: 88rpx;
		color: #333;
		font-family: PingFangSC;
		color: #ffffff;
		font-weight: 500;
		font-size: 32rpx;
		padding: 0;
		border-radius: 50px;
		background-color: #f00;
		border: none;
	}
</style>